<div class="material-ui-content">
  <h1>Material 组件展示</h1>
  <p>这里展示了 Angular Material 的各种组件和功能，帮助开发者了解如何使用这些组件。</p>
  
  <div class="demo-container">

    <!-- 标签页 -->
    <mat-tab-group>
      <!-- 基础组件 -->
      <mat-tab label="基础组件">
        <div class="tab-content">
          <!-- 按钮组 -->
          <div class="card">
            <h3>按钮组件</h3>
            <div class="button-group">
              <button mat-button>基础按钮</button>
              <button mat-raised-button color="primary">主要按钮</button>
              <button mat-flat-button color="accent">强调按钮</button>
              <button mat-stroked-button>描边按钮</button>
              <button mat-icon-button>
                <mat-icon>favorite</mat-icon>
              </button>
              <button mat-fab color="primary">
                <mat-icon>add</mat-icon>
              </button>
              <button mat-mini-fab color="accent">
                <mat-icon>edit</mat-icon>
              </button>
            </div>
          </div>

          <!-- Toast 通知测试 -->
          <div class="card">
            <h3>Toast 通知测试</h3>
            <div class="button-group">
              <button mat-raised-button color="primary" (click)="showToastInfo()">Info</button>
              <button mat-raised-button color="accent" (click)="showToastSuccess()">Success</button>
              <button mat-raised-button color="warn" (click)="showToastWarn()">Warning</button>
              <button mat-raised-button (click)="showToastError()">Error</button>
            </div>
          </div>

          <!-- 表单组件 -->
          <div class="card">
            <h3>表单组件</h3>
            <div class="form-group">
              <mat-form-field appearance="fill" class="form-field">
                <mat-label>姓名</mat-label>
                <input matInput [formControl]="nameControl" placeholder="请输入姓名">
                <mat-error *ngIf="nameControl.hasError('required')">姓名是必填项</mat-error>
              </mat-form-field>

              <mat-form-field appearance="fill" class="form-field">
                <mat-label>邮箱</mat-label>
                <input matInput [formControl]="emailControl" placeholder="请输入邮箱">
                <mat-error *ngIf="emailControl.hasError('email')">请输入有效的邮箱地址</mat-error>
              </mat-form-field>

              <mat-form-field appearance="fill" class="form-field">
                <mat-label>选择选项</mat-label>
                <mat-select [formControl]="selectedOption">
                  <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
                </mat-select>
              </mat-form-field>

              <div class="checkbox-group">
                <mat-checkbox [(ngModel)]="checkboxValue">我同意条款</mat-checkbox>
              </div>

              <div class="radio-group">
                <mat-radio-group [(ngModel)]="radioValue">
                  <mat-radio-button value="option1">选项1</mat-radio-button>
                  <mat-radio-button value="option2">选项2</mat-radio-button>
                  <mat-radio-button value="option3">选项3</mat-radio-button>
                </mat-radio-group>
              </div>

              <div class="toggle-group">
                <mat-slide-toggle [(ngModel)]="slideToggleValue">启用功能</mat-slide-toggle>
              </div>

              <div class="slider-group">
                <span class="label-text">音量: {{sliderValue}}%</span>
                <mat-slider min="0" max="100" step="1">
                  <input matSliderThumb [(ngModel)]="sliderValue" aria-label="音量滑块">
                </mat-slider>
              </div>
            </div>
          </div>

          <!-- 进度组件 -->
          <div class="card">
            <h3>进度组件</h3>
            <div class="progress-group">
              <mat-progress-bar mode="determinate" [value]="sliderValue"></mat-progress-bar>
              <mat-progress-bar mode="indeterminate"></mat-progress-bar>
              <mat-progress-spinner></mat-progress-spinner>
              <mat-progress-spinner mode="determinate" [value]="sliderValue"></mat-progress-spinner>
            </div>
          </div>
        </div>
      </mat-tab>

      <!-- 高级组件 -->
      <mat-tab label="高级组件">
        <div class="tab-content">
          <!-- 芯片组件 -->
          <div class="card">
            <h3>芯片组件</h3>
            <mat-chip-listbox>
              <mat-chip-option *ngFor="let fruit of fruits" (removed)="removeFruit(fruit)">
                {{fruit}}
                <button matChipRemove>
                  <mat-icon>cancel</mat-icon>
                </button>
              </mat-chip-option>
            </mat-chip-listbox>
            <mat-form-field appearance="fill">
              <mat-label>添加水果</mat-label>
              <mat-chip-grid #chipGrid>
                <mat-chip-row *ngFor="let fruit of fruits" (removed)="removeFruit(fruit)">
                  {{fruit}}
                  <button matChipRemove>
                    <mat-icon>cancel</mat-icon>
                  </button>
                </mat-chip-row>
              </mat-chip-grid>
              <input placeholder="输入水果名称" [matChipInputFor]="chipGrid" (matChipInputTokenEnd)="addFruit($event)">
            </mat-form-field>
          </div>

          <!-- 扩展面板 -->
          <div class="card">
            <h3>扩展面板</h3>
            <mat-accordion>
              <mat-expansion-panel>
                <mat-expansion-panel-header>
                  <mat-panel-title>个人信息</mat-panel-title>
                  <mat-panel-description>查看和编辑个人信息</mat-panel-description>
                </mat-expansion-panel-header>
                <p>这里可以显示个人信息的内容...</p>
              </mat-expansion-panel>
              <mat-expansion-panel>
                <mat-expansion-panel-header>
                  <mat-panel-title>账户设置</mat-panel-title>
                  <mat-panel-description>管理账户相关设置</mat-panel-description>
                </mat-expansion-panel-header>
                <p>这里可以显示账户设置的内容...</p>
              </mat-expansion-panel>
            </mat-accordion>
          </div>

          <!-- 步骤器 -->
          <div class="card">
            <h3>步骤器</h3>
            <mat-stepper [linear]="isLinear" #stepper>
              <mat-step [stepControl]="nameControl">
                <ng-template matStepLabel>填写基本信息</ng-template>
                <mat-form-field appearance="fill">
                  <mat-label>姓名</mat-label>
                  <input matInput [formControl]="nameControl" placeholder="请输入姓名">
                </mat-form-field>
                <div>
                  <button mat-button matStepperNext>下一步</button>
                </div>
              </mat-step>
              <mat-step [stepControl]="emailControl">
                <ng-template matStepLabel>填写联系信息</ng-template>
                <mat-form-field appearance="fill">
                  <mat-label>邮箱</mat-label>
                  <input matInput [formControl]="emailControl" placeholder="请输入邮箱">
                </mat-form-field>
                <div>
                  <button mat-button matStepperPrevious>上一步</button>
                  <button mat-button matStepperNext>下一步</button>
                </div>
              </mat-step>
              <mat-step>
                <ng-template matStepLabel>完成</ng-template>
                <p>您已完成所有步骤！</p>
                <div>
                  <button mat-button matStepperPrevious>上一步</button>
                  <button mat-button (click)="stepper.reset()">重置</button>
                </div>
              </mat-step>
            </mat-stepper>
          </div>
        </div>
      </mat-tab>

      <!-- 数据展示 -->
      <mat-tab label="数据展示">
        <div class="tab-content">
          <!-- 表格 -->
          <div class="card">
            <h3>数据表格</h3>
            <table mat-table [dataSource]="dataSource" class="demo-table">
              <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef>姓名</th>
                <td mat-cell *matCellDef="let element">{{element.name}}</td>
              </ng-container>
              <ng-container matColumnDef="email">
                <th mat-header-cell *matHeaderCellDef>邮箱</th>
                <td mat-cell *matCellDef="let element">{{element.email}}</td>
              </ng-container>
              <ng-container matColumnDef="role">
                <th mat-header-cell *matHeaderCellDef>角色</th>
                <td mat-cell *matCellDef="let element">{{element.role}}</td>
              </ng-container>
              <ng-container matColumnDef="status">
                <th mat-header-cell *matHeaderCellDef>状态</th>
                <td mat-cell *matCellDef="let element">
                  <mat-chip [color]="element.status === '活跃' ? 'primary' : 'warn'">
                    {{element.status}}
                  </mat-chip>
                </td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
          </div>

          <!-- 列表 -->
          <div class="card">
            <h3>列表组件</h3>
            <mat-list>
              <mat-list-item>
                <mat-icon matListItemIcon>person</mat-icon>
                <div matListItemTitle>张三</div>
                <div matListItemLine>管理员</div>
              </mat-list-item>
              <mat-divider></mat-divider>
              <mat-list-item>
                <mat-icon matListItemIcon>person</mat-icon>
                <div matListItemTitle>李四</div>
                <div matListItemLine>用户</div>
              </mat-list-item>
              <mat-divider></mat-divider>
              <mat-list-item>
                <mat-icon matListItemIcon>person</mat-icon>
                <div matListItemTitle>王五</div>
                <div matListItemLine>用户</div>
              </mat-list-item>
            </mat-list>
          </div>
        </div>
      </mat-tab>

      <!-- 交互组件 -->
      <mat-tab label="交互组件">
        <div class="tab-content">
          <!-- 对话框和提示 -->
          <div class="card">
            <h3>对话框和提示</h3>
            <div class="interaction-group">
              <button mat-raised-button color="primary" (click)="openDialog()">
                打开对话框
              </button>
              <button mat-raised-button color="accent" (click)="showSnackBar()">
                显示提示消息
              </button>
              <button mat-icon-button matTooltip="这是一个提示信息">
                <mat-icon>help</mat-icon>
              </button>
              <button mat-icon-button>
                <mat-icon matBadge="4" matBadgeColor="warn" aria-hidden="false">notifications</mat-icon>
              </button>
            </div>
          </div>

          <!-- 日期选择器 -->
          <div class="card">
            <h3>日期选择器</h3>
            <mat-form-field appearance="fill">
              <mat-label>选择日期</mat-label>
              <input matInput [matDatepicker]="picker" placeholder="请选择日期">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
          </div>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>
</div>